<template>
	<view class="list-box">
		<view class="list" v-for="(item, index) in list" :key="index">
			<view v-for="(nav, i) in item" :key="i"
				@click="clickHandler(nav)"
				class="list-item space-between center"
				:hover-class="nav.checked || nav.checked === false ? '': 'active'"
				:hover-start-time="50"
			>
				<view class="left center">
					<text v-if="nav.icon" :class="nav.icon"></text>
					<text>{{nav.title}}</text>
				</view>
				<view class="right center">
					<text v-if="nav.text" >{{nav.text}}</text>
					<switch v-if="nav.checked || nav.checked === false"
						@click.stop="()=>{}" @change="clickHandler(nav)"
						:checked="nav.checked" color="#345DC2"
						/>
					<image v-if="nav.src" :src="nav.src"></image>
					<text v-if="nav.rightIcon" :class="nav.rightIcon"></text>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	export default {
		props: {
			list: Array, 
		},

		methods: {
      // 点击列表项触发处理函数
			clickHandler(obj) {
				console.log('obj', obj.page)  
				// 如果存在页面路径，则进行页面跳转
				if(obj.page) {
					// 点击后跳转到目标页面，并且会判断是否要求登录，没有登录进入登录页
					this.navTo(obj.page, {login: obj.login}) 
					return 
				}

				// 如果存在事件名称，则触发对应的自定义事件
				if(obj.event) {
					this.$emit(obj.event, obj) 
				}

			}
		}
	}
</script>

<style lang="scss">
	/* 列表容器样式 */
	.list-box {
		background-color: $mxg-color-grey;  // 背景颜色
		padding-top: 20rpx;  // 上内边距
		/* 列表项样式 */
		.list {
			background-color: #FFFFFF;  // 背景颜色
			margin-bottom: 20rpx;  // 下外边距
			/* 列表项子项样式 */
			.list-item {
				padding: 26rpx 39rpx;  // 内边距
				border-bottom: $mxg-underline;  // 底部边框
			}
			/* 左侧内容样式 */
			.left {
				font-size:  33rpx;  // 字体大小
				text:first-child {
					margin-right: 20rpx;  // 第一个文本元素右外边距
				}
			}
			/* 右侧内容样式 */
			.right {
				text {
					font-size: 35rpx;  // 字体大小
					color: $mxg-text-color-grey;  // 文字颜色
					margin-left: 15rpx;  // 左外边距
				}
				image {
					width: 120rpx;  // 宽度
					height: 120rpx;  // 高度
					border-radius: 60rpx;  // 圆角
				}
				switch {
					margin-right: -10rpx;  // 右外边距
				}
			}

			/* 激活状态样式 */
			.active {
				background-color: #fafafa;  // 背景颜色
			}
		}
	}

	/* 图片全局样式 */
	image {
		width: 80rpx;  // 宽度
		height: 80rpx;  // 高度
	}
</style>
